<template>
  <div>
    <!-- 添加 -->
    <div>
      <el-button type="primary" round @click="dialogVisible = true">添加菜单</el-button>
    </div>

    <!-- 展示菜单表格 -->
    <div style="margin-top: 10px;">
      <el-table :data="treeData" row-key="id" border style="width: 100%">
        <el-table-column prop="name" label="菜单名"/>
        <el-table-column prop="icon" label="图标"/>
        <el-table-column prop="status" label="是否启用"/>
        <el-table-column prop="sort" label="排序"/>
        <el-table-column prop="router" label="路由"/>
        <el-table-column prop="component" label="组件"/>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">

import {menuTreeAllApi} from "@/api/sys/MenuApi";
import {onMounted, reactive, ref} from "vue";

let treeData = ref([])
let dialogVisible = ref(false)

const getMenu = async () => {
  let result = await menuTreeAllApi();
  treeData.value = result.data
}

onMounted(() => {
  getMenu()
})
</script>

<style scoped></style>
